<template>
    <a-tree-select
          :disabled='disabled'
          v-model="selectDefaltKey"
          :tree-data="treeData"
          tree-node-filter-prop="title"
          :placeholder="placeholder"
           :allowClear="true"
             showCheckedStrategy="SHOW_ALL"
             :show-search="true"
            :multiple="multiple"
            :replaceFields="replaceFields"
             :treeCheckStrictly="false"
             @change="onChange"
             :labelInValue="labelInValue" 
          :tree-default-expand-all="false"
        >
    </a-tree-select>

</template>

<script>
import { getRiskAction ,postRiskAction} from '@/api/manage';
export default {
  name: 'ComonTreeSelect',
  components: {
  },
  model:{
      prop:'selectKey',
      event: 'modelChange'
  },
  props:{
    url:{
      type:String,
      
    },
    param:{
      type:Object,
      default:()=>{},
      required:false,
    },
    placeholder:{
      default:'请选择数据',
      required:false,
    },
    parentId:{
      type:Number,
      default:null,
    },
    selectKey:{
        
        default:null,
    },
    disabled:{
      type:Boolean,
      default:false,
      required:false,
    },
    //改变选择默认选最末级
    changeSelect:{
      type:Boolean,
      default:true,
      required:false,
    },
    labelInValue:{
         type:Boolean,
            default:false,
            required:false,
    },
     multiple:{
         type:Boolean,
            default:false,
            required:false,
    },
    replaceFields:{
      type:Object,
      default:()=>{return { children: 'children', title: 'title', key: 'id', value: 'id' }},
      required:false,
    },
  },
  watch:{
      // 双向绑定
      selectKey(newValue){
        
        this.selectDefaltKey=newValue
      },
    selectDefaltKey(newValue, oldValue) {
        
      this.$emit('modelChange', newValue)
    },
   
   
  },
  data() {
    return {
        selectDefaltKey:this.selectKey,
        treeData: [],
        treeShowData: [],
        treeNodeData: {},
        treeSelectedKeys: [],
        treeExpandedKeys: [],
       
        selectableLastLevel:[],
        
    };
  },
  created(){
  },
  mounted(){
      
      this.fetchTree()
  },
  methods: {
    
    select(){

    },
      handleTreeExpand(expandedKeys) {
      this.treeExpandedKeys = expandedKeys;
    },
       fetchTree() {
        
      const that = this;
    
      getRiskAction(this.url, this.param).then(res => {
        
        if (res.code==0) {
          that.treeData = []
          that.treeData = res.data;
         
          that.setSelectable(that.treeData);
          that.$emit('initTreeData',that.treeData);
        
        }else{
           this.$message.error('获取数据错误'+res.msg);
        }
      });
    },
    
    onChange(value, label, extra){
      
      this.selectDefaltKey = value
        this.$emit("modelChange",value)
      
      this.$nextTick(()=>{
        var data = {value:'',label:''}
        if(this.multiple){
            label = !label || label.length==0 ? []: label
            data.value =!value?'': value.join(",") 
          data.label = !label ?'':label.join(",") 
        }else{
          label = !label || label.length==0 ? "": label[0]
          data.value = value 
          data.label = label
        }
        this.$emit("valueChange",value,label,data)
      })
 
     
      
    },
   setSelectable(data){
      if(!!data && data.length>0  ){

          data.forEach(it => {
            if(this.changeSelect){
            it.selectable = true;

            }else{
            it.selectable = false;

            } 
            if(!it.children || it.children.length==0){
              it.selectable = true;
            }else{
              this.setSelectable(it.children)
            }
        });
      }
      
    },
    loops(data = [], parent) {
      const that = this;
      return data.map(({ children, key: key, title: value }) => {
        const node = {
          key,
          value,
          parent
        };
        that.treeNodeData[key] = node;
        node.children = that.loops(children, node);
        return;
      });
    },
  },
  computed:{
  },
  filters: {
  },
 

 }
</script>

<style lang="scss" scoped>
@import '@/styles/riskListOrCard.scss';


</style>
